<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X中文版 - 连接世界的声音</title>
    <script src="lib/tailwindcss.3.4.16.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .custom-shadow {
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }

        .hover-bg {
            transition: background-color 0.2s ease;
        }

        .hover-bg:hover {
            background-color: rgba(15, 20, 25, 0.1);
        }

        .tweet-card {
            transition: all 0.2s ease;
        }

        .tweet-card:hover {
            background-color: rgba(0, 0, 0, 0.03);
        }
    </style>
</head>

<body class="bg-white text-gray-900 font-sans">
    <!-- 顶部导航 -->
    <jsp:include page="/WEB-INF/navbar.jsp"></jsp:include>
    <!-- 主要内容区域 -->
    <div class="max-w-6xl mx-auto px-4 pt-20">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧边栏 -->
            <div class="hidden lg:block">
                <div class="sticky top-24">
                    <div class="bg-gray-50 rounded-2xl p-6 mb-6">
                        <h3 class="text-xl font-bold mb-4">热门话题</h3>
                        <div class="space-y-3">
                            <div class="hover-bg p-2 rounded-lg cursor-pointer">
                                <p class="text-sm text-gray-600">科技 · 热门</p>
                                <p class="font-medium">#人工智能发展</p>
                                <p class="text-sm text-gray-600">48.2K 推文</p>
                            </div>
                            <div class="hover-bg p-2 rounded-lg cursor-pointer">
                                <p class="text-sm text-gray-600">体育 · 热门</p>
                                <p class="font-medium">#世界杯</p>
                                <p class="text-sm text-gray-600">156K 推文</p>
                            </div>
                            <div class="hover-bg p-2 rounded-lg cursor-pointer">
                                <p class="text-sm text-gray-600">娱乐 · 热门</p>
                                <p class="font-medium">#新电影上映</p>
                                <p class="text-sm text-gray-600">32.1K 推文</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gray-50 rounded-2xl p-6">
                        <h3 class="text-xl font-bold mb-4">推荐关注</h3>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full">
                                    </div>
                                    <div>
                                        <p class="font-medium">科技新闻</p>
                                        <p class="text-sm text-gray-600">@tech_news</p>
                                    </div>
                                </div>
                                <button
                                    class="bg-black text-white px-4 py-1 rounded-full text-sm hover:bg-gray-800 transition-colors">
                                    关注
                                </button>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-500 rounded-full">
                                    </div>
                                    <div>
                                        <p class="font-medium">设计师小王</p>
                                        <p class="text-sm text-gray-600">@designer_wang</p>
                                    </div>
                                </div>
                                <button
                                    class="bg-black text-white px-4 py-1 rounded-full text-sm hover:bg-gray-800 transition-colors">
                                    关注
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间主要内容 -->
            <div class="lg:col-span-2">
                <!-- 发推区域 -->
                <div class="bg-white rounded-2xl custom-shadow mb-6 p-6">
                    <div class="flex space-x-4">
                        <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex-shrink-0">
                        </div>
                        <div class="flex-1">
                            <textarea placeholder="有什么新鲜事？"
                                class="w-full h-24 resize-none border-none outline-none text-xl placeholder-gray-500"></textarea>
                            <div class="flex items-center justify-between mt-4">
                                <div class="flex space-x-4">
                                    <button class="text-blue-500 hover:bg-blue-50 p-2 rounded-full transition-colors">
                                        <i class="fas fa-image"></i>
                                    </button>
                                    <button class="text-blue-500 hover:bg-blue-50 p-2 rounded-full transition-colors">
                                        <i class="fas fa-video"></i>
                                    </button>
                                    <button class="text-blue-500 hover:bg-blue-50 p-2 rounded-full transition-colors">
                                        <i class="fas fa-poll"></i>
                                    </button>
                                    <button class="text-blue-500 hover:bg-blue-50 p-2 rounded-full transition-colors">
                                        <i class="fas fa-calendar"></i>
                                    </button>
                                </div>
                                <button
                                    class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition-colors">
                                    发推
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 推文流 -->
                <div class="space-y-6">
                    <!-- 推文卡片 1 -->
                    <div class="bg-white rounded-2xl custom-shadow p-6 tweet-card">
                        <div class="flex space-x-4">
                            <div class="w-12 h-12 bg-gradient-to-r from-red-500 to-pink-500 rounded-full flex-shrink-0">
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center space-x-2 mb-2">
                                    <h3 class="font-bold">张三</h3>
                                    <span class="text-blue-500"><i class="fas fa-check-circle"></i></span>
                                    <span class="text-gray-500">@zhangsan</span>
                                    <span class="text-gray-500">·</span>
                                    <span class="text-gray-500">2小时前</span>
                                </div>
                                <p class="text-gray-900 mb-4">今天学了一个新的设计技巧，分享给大家！使用渐变色可以让界面更加生动有趣。#设计技巧 #UI设计</p>
                                <div class="mb-4">
                                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
                                        alt="夕阳1" class="w-full h-32 object-cover rounded-xl">
                                </div>
                                <div class="flex items-center justify-between text-gray-500">
                                    <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                        <i class="far fa-comment"></i>
                                        <span>24</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-green-500 transition-colors">
                                        <i class="fas fa-retweet"></i>
                                        <span>12</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-red-500 transition-colors">
                                        <i class="far fa-heart"></i>
                                        <span>156</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                        <i class="fas fa-share"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 推文卡片 2 -->
                    <div class="bg-white rounded-2xl custom-shadow p-6 tweet-card">
                        <div class="flex space-x-4">
                            <div
                                class="w-12 h-12 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex-shrink-0">
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center space-x-2 mb-2">
                                    <h3 class="font-bold">李四</h3>
                                    <span class="text-gray-500">@lisi</span>
                                    <span class="text-gray-500">·</span>
                                    <span class="text-gray-500">4小时前</span>
                                </div>
                                <p class="text-gray-900 mb-4">刚看完最新的科技发布会，人工智能的发展真的太快了！期待未来会有更多创新应用。什么时候我们也能有自己的AI助手呢？🤖
                                    #人工智能 #科技</p>
                                <div class="flex items-center justify-between text-gray-500">
                                    <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                        <i class="far fa-comment"></i>
                                        <span>8</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-green-500 transition-colors">
                                        <i class="fas fa-retweet"></i>
                                        <span>5</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-red-500 transition-colors">
                                        <i class="far fa-heart"></i>
                                        <span>32</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                        <i class="fas fa-share"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 推文卡片 3 -->
                    <div class="bg-white rounded-2xl custom-shadow p-6 tweet-card">
                        <div class="flex space-x-4">
                            <div
                                class="w-12 h-12 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex-shrink-0">
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center space-x-2 mb-2">
                                    <h3 class="font-bold">王五</h3>
                                    <span class="text-blue-500"><i class="fas fa-check-circle"></i></span>
                                    <span class="text-gray-500">@wangwu</span>
                                    <span class="text-gray-500">·</span>
                                    <span class="text-gray-500">6小时前</span>
                                </div>
                                <p class="text-gray-900 mb-4">今天的夕阳特别美，忍不住分享一下。生活中的美好时刻总是能让人心情愉悦。大家今天过得怎么样？</p>
                                <div class="grid grid-cols-2 gap-2 mb-4">
                                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop"
                                        alt="夕阳1" class="w-full h-32 object-cover rounded-xl">
                                    <img src="https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?w=300&h=200&fit=crop"
                                        alt="夕阳2" class="w-full h-32 object-cover rounded-xl">
                                </div>
                                <div class="flex items-center justify-between text-gray-500">
                                    <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                        <i class="far fa-comment"></i>
                                        <span>16</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-green-500 transition-colors">
                                        <i class="fas fa-retweet"></i>
                                        <span>8</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-red-500 transition-colors">
                                        <i class="far fa-heart"></i>
                                        <span>89</span>
                                    </button>
                                    <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                        <i class="fas fa-share"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部移动端导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 lg:hidden">
        <div class="flex items-center justify-around py-3">
            <a href="#" class="text-gray-600 hover:text-black transition-colors">
                <i class="fas fa-home text-xl"></i>
            </a>
            <a href="#" class="text-gray-600 hover:text-black transition-colors">
                <i class="fas fa-search text-xl"></i>
            </a>
            <a href="#" class="text-gray-600 hover:text-black transition-colors">
                <i class="fas fa-bell text-xl"></i>
            </a>
            <a href="#" class="text-gray-600 hover:text-black transition-colors">
                <i class="fas fa-envelope text-xl"></i>
            </a>
        </div>
    </div>
</body>
</html>